import { useIntersectionObserver } from '@vueuse/core'

//定义全局指令 插件
export const lazyPlugin = {
    install(app) {
        //全局指令
        app.directive('img-lazy', {
            mounted(el, binding) {
                //创建一个观察对象
                const{stop}= useIntersectionObserver(
                    el,
                    ([{ isIntersecting }]) => {
                    if (isIntersecting) {
                        //进入视口区域
                        el.src = binding.value
                        //取消监听
                        stop()
                    }
                    },
                    {
                    threshold: 0.01
                    }
                )
            }
        })
    }
}